<template>
    <div class="home-scroll">
        <div class="box-card">
            <!-- markdown -->
            <el-collapse v-model="activeNames" class="doc-body">
                <el-collapse-item title="项目时间" name="1">
                    <div class="doc">
                        <HelloWorld />
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import HelloWorld from '@/assets/README.md'
const activeNames = ref(['0'])
</script>

<style lang="scss" scoped>
.home-scroll {
    width: 100vw;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .box-card {
        margin-bottom: 20px;
        width: 1200px;
        display: flex;
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .card-header {
        > span {
            font-size: 18px;
        }
    }
    .doc-body {
        width: 1200px;
    }
}
:deep(.el-collapse-item__header) {
    font-size: 18px !important;
}
</style>
